<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

// 1. 定义一个响应式变量来存储图片 URL
const dogImageUrl = ref('')

// 2. 定义获取随机狗狗图片的函数
const fetchRandomDogImage = async () => {
  try {
    // 显示加载状态（可选）
    dogImageUrl.value = '' // 清空旧图片

    const response = await axios.get('https://dog.ceo/api/breeds/image/random')

    // 3. 从响应中提取图片 URL
    // 根据 API 文档，返回的数据结构是 { message: '图片链接', status: 'success' }
    dogImageUrl.value = response.data.message

    console.log('获取到的狗狗图片:', dogImageUrl.value)
  } catch (error) {
    console.error('请求狗狗图片失败:', error)
    // 可以设置一个默认图片或错误提示
    dogImageUrl.value = 'https://http.dog/500.jpg' // 示例错误图
  }
}

// 4. （可选）组件挂载后自动获取一张图片
// 如果你希望页面一打开就显示一张狗狗图片，取消下面这行的注释
fetchRandomDogImage()
</script>

<template>
  <div style="padding: 20px; text-align: center">
    <h2>随机狗狗图片 🐶</h2>

    <!-- 按钮：点击获取新图片 -->
    <el-button @click="fetchRandomDogImage"> 获取随机狗狗图片 </el-button>

    <!-- 显示图片 -->
    <div v-if="dogImageUrl">
      <el-image :src="dogImageUrl" alt="随机狗狗" lazy />
    </div>

    <!-- 加载状态 -->
    <p v-else>点击按钮获取狗狗图片...</p>
  </div>
</template>

<style scoped>
/* 你可以添加更多样式 */
.image-container {
  margin-top: 20px;
  transition: opacity 0.3s;
}
</style>
